<template>
	<view class="setter-vison wf-box">
		<HeadNav :navBarHeight="navBarHeight" titleName="设置"></HeadNav>
		
		<view class="setter-view" v-for="itme in  stterList">
			<view class="setter-li" v-for="main in itme.mainList">
				<view class="name-view">
					<image class="stter-icon" :src="main.icon" mode=""></image>
					<view class="name">
						{{main.name}}
					</view>

				</view>
				<view class="" v-if="main.type == 1 || main.type == 2">
					<text v-if="main.type == 2">{{lang}}</text>
					<uni-icons type="right" size="12"></uni-icons>
				</view>
				<view class="" v-if="main.type == 3">
					<switch checked color="#58A1FF" style="transform:scale(0.8)" />
				</view>
			</view>
		</view>
		<popup-affirm ref="affirm"  :popupInfo="popupInfo"></popup-affirm>
		<button class="log-out-btn" @click="outLog(type)">退出登录</button>
	</view>
</template>

<script>
	import HeadNav from "@/components/HeadNav"
	import navBarMixin from '@/mixin/navBarMixin.js'
	export default {
		data() {
			return {
				type: 'center',
				popupInfo:{
					name:'温馨提示',
					text:'是否确认退出登录',
					btnText:'确认'
				},
				lang: 'CN',
				stterList: [{
						mainList: [{
							name: '每日签到',
							icon: '../../static/img/stter-icon1.png',
							type: 1
						}, {
							name: '更换语言',
							icon: '../../static/img/stter-icon2.png',
							type: 2
						}, {
							name: '通讯黑名单',
							icon: '../../static/img/stter-icon3.png',
							type: 1
						}, {
							name: '通讯黑名单',
							icon: '../../static/img/stter-icon4.png',
							type: 1
						}, ],
					},
					{
						mainList: [{
							name: '清空聊天记录',
							icon: '../../static/img/stter-icon5.png',
							type: 1
						}, {
							name: '开启夜间模式',
							icon: '../../static/img/stter-icon6.png',
							type: 3
						}, {
							name: '收不到新消息？',
							icon: '../../static/img/stter-icon7.png',
							type: 1
						}, {
							name: '关于我们',
							icon: '../../static/img/stter-icon8.png',
							type: 1
						}, ]
					},

				]
			}
		},
		components:{
			HeadNav
		},
		mixins: [navBarMixin],
		methods: {
			outLog(type) {
				this.$refs.affirm.toggle(type)
			},
		}
	}
</script>

<style lang="scss" scoped>

	@mixin main-view {
		width: 92%;
		margin-left: 4%;
		padding:0 30rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		box-sizing: border-box;
	}
	
	.wf-box {
		overflow: hidden
	}

	.setter-view {
		@include main-view;
		margin-top: 126rpx;
		margin-bottom: 30rpx;

		.setter-li {
			display: flex;
			align-items: center;
			justify-content: space-between;
			box-sizing: border-box;
			height: 112rpx;
			width: 100%;
			// padding: 0 30rpx;
			border-bottom: 1rpx solid #EEEEEE;
			
			.name-view{
				display: flex;
				align-items: center;
			}
			
			.stter-icon{
				width: 50rpx;
				height: 50rpx;
				margin-right: 20rpx;
			}
			
			.name{
				font-size: 28rpx;
				color: #333333;
			}
		}
	}
	
	
	.log-out-btn {
		width: 84%;
		height: 84rpx;
		line-height: 84rpx;
		border-radius: 42rpx;
		border: 1rpx solid #58A1FF;
		font-size: 28rpx;
		color: #58A1FF;
		margin-top: 54rpx;
	}
</style>